<template>
  <div class="template-box" id="template1-scorll-box">
    <heardTab
      :background="background"
      :position="position"
      @pathChild="pathChild"
      :flag="flag"
      @changeFlag="changeFlag"
    />
    <div class="conetent" :style="{ background: store.styleInfo.background }" id="template1Box">
      <!-- <router-view></router-view> -->
      <router-view v-slot="{ Component }">
        <keep-alive
          include="templateItem1,exhibits,templateHome,template1,templateItemChild,itemChild1,itemChild2,pageChildItem1,pageChildItem2,pageChildItem3,pageChild2,pageChild1"
        >
          <component :is="Component"></component>
        </keep-alive>
        <!-- <keep-alive
          include="exhibits,templateHome,template1,templateItemChild,itemChild1,itemChild2,pageChildItem1,pageChildItem2,pageChildItem3,pageChild2,pageChild1"
        >
          <component :is="Component"></component>
        </keep-alive> -->
      </router-view>
    </div>
    <templateFooter :background="store.styleInfo.themeColor" v-model="cruuent" @setCruuent="setCruuent" />
    <NavVue
      v-if="
        route.meta.title !== '模板首页' &&
        route.meta.title !== '展品详情' &&
        route.meta.title !== '学术研究详情' &&
        route.meta.title !== '子单元'
      "
      :flag="false"
    ></NavVue>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'template1',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { useRouter, useRoute } from 'vue-router';
import heardTab from '../heardTemponents/heardTab.vue';
import templateFooter from '../footer/footer.vue';
import { ref, computed, watch, onMounted } from 'vue';
import { useProjectStore } from '@/store';
import NavVue from '../publicComponents/components/nav.vue';
const store = useProjectStore();
const route = useRoute();
const router = useRouter();
const cruuent = ref(0);
const flag = ref(false);
const background = ref('rgba(0, 0, 0, 0.4)'); //#CFBDA8"
const position = ref('absolute'); //relative
const color = ref('#ffffff');
if (route.meta.position == 'absolute') {
  background.value = 'rgba(0, 0, 0, 0.4)';
  position.value = 'absolute';
} else {
  background.value = store.styleInfo.themeColor;
  position.value = 'relative';
}
watch(
  () => route,
  () => {
    // console.log('变化');
    if (route.meta.position == 'absolute') {
      background.value = 'rgba(0, 0, 0, 0.4)';
      position.value = 'absolute';
    } else {
      background.value = store.styleInfo.themeColor;
      position.value = 'relative';
    }
    var dom = document.getElementById('template1-scorll-box');
    if (dom) {
      if (route.name === 'templateExhibitsInfo' || route.name === 'templateExhibitsInfoLoop') {
        dom.style.height = '100vh';
      } else {
        dom.style.height = '100%';
      }
    }
  },
  { deep: true },
);
watch(
  store.styleInfo,
  () => {
    if (route.meta.position == 'absolute') {
      background.value = 'rgba(0, 0, 0, 0.4)';
      position.value = 'absolute';
    } else {
      background.value = store.styleInfo.themeColor;
      position.value = 'relative';
    }
  },
  { deep: true },
);
const setCruuent = (e: number) => {
  switch (e) {
    case 0:
      router.push({
        name: route.meta.loopType ? pathListLoop[0] : pathList[0],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 1:
      router.push({
        name: route.meta.loopType ? pathListLoop[1] : pathList[1],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 2:
      router.push({
        name: route.meta.loopType ? pathListLoop[5] : pathList[5],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 3:
      router.push({
        name: route.meta.loopType ? pathListLoop[6] : pathList[6],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 4:
      router.push({
        name: route.meta.loopType ? pathListLoop[3] : pathList[3],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    default:
      router.push({
        name: route.meta.loopType ? pathListLoop[7] : pathList[7],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
  }
};
const pathChild = (e) => {
  // if (e !== 0) {
  //   background.value = store.styleInfo.themeColor;
  //   position.value = 'relative';
  // } else {
  //   background.value = 'rgba(0, 0, 0, 0.4)';
  //   position.value = 'absolute';
  // }
};
onMounted(() => {
  // 获取目标元素
  const myDiv = document.getElementById('template1Box');

  // 监听滚轮事件
  if (myDiv) {
    myDiv.addEventListener('wheel', handleScroll);
    myDiv.addEventListener('click', handleClick);
  }

  // 滚轮事件处理程序
  function handleScroll(event) {
    // 判断滚轮滚动方向
    const delta = Math.sign(event.deltaY);
    // 如果向下滚动，执行相应逻辑
    if (delta > 0 && !flag.value) {
      // 执行滚轮向下滑动时的操作
      // console.log('滚轮向下滑动！');
      flag.value = true;
      // console.log(flag.value);
    }
  }

  function handleClick(event) {
    flag.value = true;
  }
});
const changeFlag = () => {
  flag.value = false;
};
</script>

<style lang="less" scoped>
.template-box {
  position: relative;
  width: 100%;
  min-height: 100%;
  // height: 100vh;
  overflow-x: hidden;
  overflow: auto;
}
.conetent {
  min-height: calc(100vh - 80px - 60px - 50px);
}
.template-box::-webkit-scrollbar {
  display: none !important;
}
// #app::-webkit-scrollbar {
//   display: none !important;
//   background: pink;
// }
span {
  text-align: justify;
}
</style>
